<style lang="scss" rel="stylesheet/scss">
    .j-comment-list{
        .comment-item {
            padding: 0.8rem 0;
            margin: 0 1rem;
            color: #333;
            display: flex;
            border-top: 1px solid #f5f5f5;
            &:nth-child(1) {
                border-top: none;
            }
            .left {
                flex:0 0 2.4rem;
                position: relative;
                img {
                    width:2.4rem;
                    height:2.4rem;
                    border-radius: 50%;
                }
                i {
                    position: absolute;
                    top: 0rem;
                    left: -0.1rem;
                    display: block;
                    width: 20px;
                    height: 10px;
                    text-align: center;
                    line-height: 10px;
                    color: #FFFFFF;
                    font-style: normal;
                    font-size: 5px;
                    border-radius: 5px;
                    vertical-align: middle;
                    transform:rotate(-45deg);
                    -ms-transform:rotate(-45deg);
                    -moz-transform:rotate(-45deg);
                    -webkit-transform:rotate(-45deg);
                    -o-transform:rotate(-45deg);
                    &.b1 {
                        background: #ff0000;
                    }
                    &.b2 {
                        background: #ff6400;
                    }
                    &.b3 {
                        background: #ff0096;
                    }
                    &.b4 {
                        background: #fa00ff;
                    }
                    &.b5 {
                        background: #c800ff;
                    }
                    &.b6 {
                        background: #0064ff;
                    }
                    &.b7 {
                        background: #00c8ff;
                    }
                    &.b8 {
                        background: #01f373;
                    }
                    &.b9 {
                        background: #3db801;
                    }
                    &.b10 {
                        background: #ffc800;
                    }
                }
            }
            .right {
                flex: 1;
                padding: 0.4rem 0 0 0.8rem;
                .top {
                    display: flex;
                    .nick-name {
                        flex:1;
                    }
                    .caozuo-btn {
                        flex: 0 0 7rem;
                        text-align: right;
                        span {
                            border: 1px solid #666;
                            color: #666;
                            font-size: 0.7rem;
                            padding: 0.1rem 0.3rem;
                            border-radius: 4px;
                            line-height:1.5rem;
                            margin-left: 1rem;
                        }
                    }
                }
                .con {
                    padding:0.5rem 0;
                    color:#444;
                    &>p {
                        line-height: 1.2rem;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        max-height: 3.5rem;
                        word-break: break-all;
                    }
                    .ta-comment-list {
                        padding:0.8rem 0.5rem;
                        background: #f5f5f5;
                        margin: 0.5rem 0;
                        border-radius: 4px;
                        p {
                            color:#666;
                            line-height: 1.2rem;
                            word-break: break-all;
                        }
                        .comment-more {
                            text-align:center;
                            border-top: 1px solid #999;
                            margin-top:0.5rem;
                            line-height:1.5rem;
                        }
                    }
                }
                .bottom {
                    display:flex;
                    line-height:1.5rem;
                    .time {
                        color:#888;
                        flex:0 0 6rem;
                    }
                    .zan {
                        flex:1;
                        display:flex;
                        text-align: right;
                        .iconfont {
                            flex:1;
                            font-size: 18px;
                        }
                    }
                }
            }
        }
        .j-comment-input{
            .out-input-div {
                position: fixed;
                top: 0;
                bottom: 51px;
                left: 0;
                right: 0;
                background: rgba(0,0,0,0.2);
                z-index: 100;
            }
            .comment-input-div {
                z-index: 100;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                border-top: 1px solid #f5f5f5;
                background: #fff;
                display: flex;
                .input-left {
                    flex: 1;
                    padding: 5px 10px;
                    border: none;
                }
                .btn-right {
                    margin: 10px;
                    height: 30px;
                    line-height: 30px;
                }
            }

        }
    }
</style>
<template>
    <div class="j-comment-list">
        <div class="comment-item" v-for="(item,index) in list" :key="index">
            <div class="left">
                <img :src="item.head_icon" alt="">
                <span v-if="ishot">
                    <i class="b1" v-if="index==0">神评</i>
                    <i class="b2" v-if="index==1">司评</i>
                    <i class="b3" v-if="index==2">军评</i>
                    <i class="b4" v-if="index==3">师评</i>
                    <i class="b5" v-if="index==4">旅评</i>
                    <i class="b6" v-if="index==5">团评</i>
                    <i class="b7" v-if="index==6">营评</i>
                    <i class="b8" v-if="index==7">连评</i>
                    <i class="b9" v-if="index==8">排评</i>
                    <i class="b10" v-if="index==9">班评</i>
                </span>
            </div>
            <div class="right">
                <div class="top">
                    <p class="font-big-normal nick-name">{{item.member_name}}</p>
                    <p class="font-normal caozuo-btn">
                        <span v-if="item.is_own === 1" @click="del(item.id)">删除</span> 
                        <span @click="answer(item.id)">回复</span>
                    </p>
                </div>
                <div class="con">
                    <p class="font-mormal">{{item.content}}</p>
                    <div class="font-normal-small ta-comment-list" v-if="item.sub.length">
                        <p class="item" v-for="(answeritem,index) in item.sub" :key="index">{{answeritem.member_name}}：{{answeritem.content}}</p>
                        <p class="font-small comment-more" @click="$router.push({name: 'user-comment',params:{id:item.id}})" v-if="showMore">展开全部{{item.subLength}}条回复</p>
                    </div>
                </div>
                <div class="bottom font-small">
                    <p class="time">{{item.time}}</p>
                    <p class="zan">
                        <span class="iconfont icon-zan" :class="{'font-red':item.is_zan === 1}" @click="commentZan(item.id)"><span style="color:#666"> {{item.zans}}</span></span>
                        <span class="iconfont icon--cai" style="color:#666" @click="commentCai(item.id)"> {{item.cais}}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="j-comment-input" style="display:none" id="inputcomitemdiv">
            <div class="out-input-div" @click="hideinputFn"></div>
            <div class="comment-input-div">
                <textarea type="text" class="input-left" id="inputComItem" v-model="message"/>
                <van-button type="primary" class="btn-right" @click="bindSendMsg">发送</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import * as typeUtils from 'utils/typeUtils' 
    export default {
        components: {
        },
        data () {
            return {
                message: '',
                unionid:sessionStorage.getItem('unionid'),
                answerId: '',
            }
        },
        props: {
            list:{
                type:Array
            },
            showMore: {
                type: Boolean,
                default: true
            },
            ishot: {
                type: Boolean,
                default: true
            }
        },
        watch: {
            list(val) {
                if(this.showMore) {
                    let subitem = {}
                    for(let item of val) {
                        item.subLength = item.sub.length
                        if(item.sub.length > 5) {
                            let arr = []
                            for(let i=0;i<5;i++){
                                arr.push(item.sub[i])
                            }
                            item.sub = arr
                        }
                    }
                }
            }
        },
        created () {

        },
        methods: {
            // 去显示input层 并自动获取焦点
            showinputFn() {
                typeUtils.stop()
                const inputdiv = document.getElementById('inputcomitemdiv')
                const input = document.querySelector('#inputComItem')
                inputdiv.style.display = 'block'
                input.focus()
            },
            // 隐藏输入框
            hideinputFn() {
                typeUtils.move()
                const inputdiv = document.getElementById('inputcomitemdiv')
                inputdiv.style.display = 'none'
            },
            del(id) {
                xmview.getKey(`detail-del-comment/${id}?unionid=${this.unionid}`,this.unionid).then(key => {
                    this.$fetch(`${xmconfig.API_YI}/v1/detail-del-comment/${id}`,{unionid:this.unionid,key:key}).then(res => {
                        if(res.code === 200) {
                            xmview.showToast(res.msg)
                            this.$emit('getCommentList',1)
                        }
                    })
                })
            },
            answer(id) {
                this.answerId = id
                this.showinputFn()
            },
            bindSendMsg() {
                if(!this.message) {
                    xmview.showToast('请输入评论')
                    return
                }
                let infoobj = JSON.parse(sessionStorage.getItem('infoObj'))
                xmview.getKey('detail-comment', this.unionid).then(key => {
                    let params = {
                        pid: this.answerId,
                        info_id: infoobj.info_id,
                        info_type: infoobj.info_type,
                        info_member_id: infoobj.info_member_id,
                        content: this.message
                    }
                    this.$post(`${xmconfig.API_YI}/v1/detail-comment?unionid=${this.unionid}&key=${key}`,params).then(res => {
                        if(res.code === 200) {
                            this.hideinputFn()
                            xmview.showToast(res.msg)
                            this.$emit('getCommentList',1)
                        }
                    })
                })
            },
            commentZan(id) {
                xmview.getKey(`detail-zan-comment/${id}?unionid=${this.unionid}`,this.unionid).then(key => {
                    this.$fetch(`${xmconfig.API_YI}/v1/detail-zan-comment/${id}`,{unionid:this.unionid,key:key}).then(res => {
                        if(res.code === 200) {
                            xmview.showToast(res.msg)
                            this.$emit('getCommentList',1)
                        }
                    })
                })

            },
            commentCai(id) {
                xmview.getKey(`detail-cai-comment/${id}?unionid=${this.unionid}`,this.unionid).then(key => {
                    this.$fetch(`${xmconfig.API_YI}/v1/detail-cai-comment/${id}`,{unionid:this.unionid,key:key}).then(res => {
                        if(res.code === 200) {
                            xmview.showToast(res.msg)
                            this.$emit('getCommentList',1)
                        }
                    })
                })
            }
            
        }
    }
</script>

